<template>
  <div id="banner">
    <div class="flex space-around">
      <button class="btn1">点餐</button>
      <button class="btn2">桌位</button>
      <button class="btn3">订单</button>
    </div>
    <div class="flex space-around">
      <button class="btn4">菜品管理</button>
      <button class="btn5">会员</button>
      <button class="btn6">报表</button>
    </div>
  </div>

</template>
<script>

</script>
<style>
#banner {
  width: 50%;
  margin: 0 auto;
}

.flex {
  display: flex;
  flex-flow: row wrap;
  margin-top: 50px;
}

button {
  width: 200px;
  height: 200px;
  border: 0px;
  cursor: pointer;
  border-radius: 10px;
}

.btn1 {
  background-color: rgb(199, 0, 7);
}

.btn1,
.btn2,
.btn3,
.btn4,
.btn5,
.btn6 {
  font-family: "Arial Normal", "Arial";
  font-weight: 400;
  font-size: 40px;
  color: white;
  text-align: center;
}

.btn2 {
  background-color: rgb(250, 102, 16);
}

.btn3 {
  background-color: rgb(250, 153, 21);
}

.btn4 {
  background-color: rgb(251, 205, 28);
}

.btn5 {
  background-color: rgb(135, 204, 204);
}

.btn6 {
  background-color: rgb(59, 162, 254);
}

.space-around {
  justify-content: space-around;
}
</style>